<script setup lang="ts">
import Calendar from '@/components/common/calender.tsx'
import todoList from '@/components/common/todo'
import { RouterLink } from "vue-router";
import { Line } from 'vue-chartjs' // 引入折线图组件
// 要解决找不到模块“chart.js”或其相应类型声明的问题，需要安装 chart.js 库及其类型定义。
import { Chart as ChartJS, registerables } from 'chart.js' 

// 注册 chart.js 所需模块
ChartJS.register(...registerables)
import { ChatDotRound, Edit, Notification,Promotion } from '@element-plus/icons-vue'
let fnList: Array<Record<string,any>> = [
    // {id: 1, name: '新建日记', bgColor: 'bg-green-500',english: 'New Daily',iconfont: Edit,path: '/write'},
    {id: 2, name: '备忘录', bgColor: 'bg-blue-700',english: 'NEW DAILY',iconfont: Notification,path: '/todo'},
    {id: 3, name: '权限管理', bgColor: 'bg-orange-600',english: 'Authority',iconfont: Promotion},
    // {id: 4, name: '数据统计', bgColor: 'bg-teal-400',english: 'NEW DAILY',iconfont: 'icon-zhinan'},
    // {id: 5, name: '个人中心', bgColor: 'bg-pink-500',english: 'NEW DAILY',iconfont: 'icon-zhinan'},
    {id: 6, name: '公告信息', bgColor: 'bg-fuchsia-500',english: 'Announcement',iconfont: ChatDotRound },
]

// 模拟系统标签数和文章数量数据
const chartData = {
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    datasets: [
        {
            label: '文章数量',
            borderColor: 'blue',
            data: [10, 15, 8, 20, 12, 18, 22],
            fill: false
        },
        {
            label: '标签数量',
            borderColor: 'red',
            data: [5, 7, 3, 9, 6, 8, 10],
            fill: false
        }
    ]
}

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    gridLines: {
        display: true
    },
    layout: {
        padding: {
            left: 20,
            right: 20,
            top: 20,
            bottom: 20
        }
    },
    scales: {
        y: {
            beginAtZero: true
        } 
    }
}
</script>
<template>
<div class="layout w-full flex-1 bg-gray-100 flex">
                <section class="w-3/5 flex-1 mr-10 flex flex-col">
                    <header class="bg-white h-[12rem] shadow-md rounded-lg flex flex-col">
                        <h1 class="p-4 text-slate-500 border-b-2">常用功能</h1>
                        <div class="grid grid-cols-3 grid-rows-1 flex-1 gap-4 p-4">

                                    <RouterLink class="flex justify-center items-center" v-for="item in fnList" :key="item.id" :to="item.path">
                                        <div :class="[item.bgColor,'w-full h-full rounded-md flex px-10']">
                                            <aside class="w-3/5 flex flex-col items-center justify-center sm:max-lg:w-full">
                                                <h3 class="text-white text-lg tracking-wider sm:max-lg:text-base">{{item.name}}</h3>
                                                <div class="text-white text-sm mt-2">{{item.english}}   </div>
                                            </aside>
                                            <aside class="w-2/5 flex justify-center items-center text-white sm:max-lg:hidden">
                                                <el-icon size="44">
                                                    <component :is="item.iconfont"></component>
                                                </el-icon>
                                                <!-- <i :class="['iconfont',item.iconfont]" style="font-size: 44px"></i> -->
                                            </aside>
                                        </div>
                                    </RouterLink>
                        </div>
                    </header>
                    <!-- 新增可视化曲线部分 -->
                    <div class="mt-5 bg-white h-[38rem] shadow-md rounded-lg p-4">
                        <h2 class="text-slate-500 border-b-2 pb-2">系统数据统计</h2>
                        <Line :data="chartData" :options="chartOptions" />
                    </div>
                </section>
        
                <aside class="w-2/5 flex flex-col">
                    <main class="bg-white h-[29rem] shadow-md rounded-lg flex flex-col">
                        <h1 class="p-4 text-slate-500 border-b-2 flex justify-between">
                            <span>日程提醒</span>
                            <router-link class="text-sm" to="#">全部提醒 <span class="text-lg">&gt;</span></router-link>
                        </h1>
        
                        <section class="flex-1">
                            <Calendar />
                        </section>
                    </main> 
                    <main class="flex-1">
                        <!-- todoList -->
                        <todoList></todoList>
                    </main>
                </aside>
            </div>

</template>
            